/*----------------------------simple reset formatting*/
html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    height: 100%;
    font: 80% / 1.5em "Helvetica", "Lucida Sans", Verdana, Arial, sans-serif;
}

a {
    text-decoration: none;
    color: #fff;
}

    /*----------------------------mobile page structure*/

#browser {
    background: #000 -moz-linear-gradient(top, #0e0e0e, #313131);
    background: #000 -webkit-gradient(linear, left top, left bottom, from(#0e0e0e), to(#313131));
    position: relative;
    width: 320px;
    height: 495px;
    overflow-x: hidden;
    overflow-y: auto;
}

#page-container {

}

.page {
    position: absolute;
    width: 320px;
    height: 495px;
    background-color: #fff;
}

.back-page {
    position: absolute;
    width: 100%;
    height: 100%;
}

    /*----------------------------nav bar*/
nav.primary > ul {
    text-align: center;
}

nav.primary > ul li {
    list-style: none;
    display: inline;
    padding: 5px;
    border: 1px solid #fff;
}

nav.primary > ul li a {
    color: #fff;
}

    /*----------------------------pages*/

#home-page {
    background-color: #6495ed;
}

#products-page {
    background-color: #a52a2a;
}

#about-page {
    background-color: #006400;
}

#contact-page {
    background-color: #ff1493;
    width: 100%;
    height: 100%;
}

    /*----------------------------utils */

.stage-center {
    top: 0;
    left: 0;
    /*opacity: 100;*/
}

.none {
    display: none
}

.hide {
    opacity: 0;
}

.show {
    opacity: 100;
}

.transition {
    -moz-transition-duration: .5s;
    -webkit-transition-duration: .5s;
    -o-transition-duration: .5s;
}

    /*----------------------------flip transition */
#back,
#front {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    -webkit-transition-duration: .5s;
    -webkit-transform-style: preserve-3d;
    z-index: 2;
}

#back {
   z-index: 3;
}

.normal {
    -webkit-transform: rotateY(0deg);
}

.flipped {
    -webkit-user-select: element;
    -webkit-transform: rotateY(180deg);
}

    /*----------------------------device specific styles*/

    /* iOS/android phone landscape screen width*/
@media screen and (max-device-width: 480px) and (orientation:landscape) {
    .stage-left {
        left: -480px;
    }

    .stage-right {
        left: 480px;
    }

    .page {
        width: 480px;
    }

}

    /* iOS/android phone portrait screen width*/
@media screen and (max-device-width: 320px) and (orientation:portrait) {
    .stage-left {
        left: -320px;
    }

    .stage-right {
        left: 320px;
    }

    .page {
        width: 320px;
    }
}

    /*catch all for at or larger than handheld landscape device widths*/
@media screen and (min-device-width: 481px) {
    .stage-left {
        left: -1024px;
    }

    .stage-right {
        left: 1024px;
    }

    .page {

    }
}

.status {
    background-color: #777;
    border: 1px solid #111;
    margin: 0 auto;
    padding:  5px;
    overflow: auto;
    width: 100%
}

.status .android {
    float:right;
    padding: 0 10px 0 0;
}

.status .fork-me {
    float:left;
}
